
/**
 * 排列比较 (柱状图).
 * 该场景由原来的 Filter (v0.1) 拆分而来
 */

addModule({
	name: "Bar Comparison",
	
	config : {
		// 结束场景延迟时间
		duration: 4000,
	},
	
	temp : {
		// 告警的个数 (直方图 X 轴的元素个数)
		len: 20, // 可配置
		displaydata: null,

		// 实际的告警频率数据, Array, 长度等于上面的 len
		frequency: null,

		// 阈值的值是多少
		threshold: 60,

		// 每个柱条是否呈现警告颜色, Array<Boolean>, 长度等于上面的 len
		showAlerts: null,

		pframe: 0
	},

	graphic: {
		opt: {},

		circles: null,
	},
	
	// 用于存储分镜 1 正弦曲线的相位参数
	phase: [0],
	
	/**
	 * 本模块的初始化函数
	 */
	init : function() {
		// 调用: 将分镜 (子场景入口函数) 全部加到场景列表中去
		addSceneFunc("BarComparison1", this.stage1, this.name, null);
		addSceneFunc("BarComparison2", this.stage2, this.name, null);
	},

	stage1 : function() {

		zr.configLayer(0, {
			motionBlur: true,
			lastFrameAlpha: 0.4,
		});

		var len = this.temp.len;
		var displaydata = new Array(len); // 显示的数据
		for (var i = 0; i < len; i++) {
			displaydata[i] = [i + 1, 0];
		}
		this.temp.displaydata = displaydata;

		var adds = new Array(len); // 显示的数据
		for (var i = 0; i < len; i++) {
			adds[i] = 0;
		}

		var opt = this.graphic.opt = {
			legend: {
				show:false,
			},
			xAxis: {
				min: 0,
				max: 21,
				axisTick: {
					// 不显示刻度点
					show: false
				},
				axisLabel: {
					// 不显示刻度数值
					show: false
				},
				splitLine: {
					show: false
				}
			},
			yAxis: {
				name: "告警严重程度",
				min: 0,
				max: 100,
				axisTick: {
					// 不显示刻度点
					show: false
				},
				axisLabel: {
					// 不显示刻度数值
					show: false
				},
				splitLine: {
					interval: function(index, value) {
						return false;
					},
					lineStyle: {
						type: 'dashed'
					}
				}
			},
			series: [{
				name: '?',
				type: 'bar',
				data: displaydata,
				itemStyle: {
					color: '#84AFD2' // 方块的颜色
				}
			}],
			grid:{
				top:'20%',
				left:'10%',
				right:'10%',
				bottom:'30%',
				containLabel:true
			}
		};

		myChart.setOption(opt);

		// 后面是球掉落的效果
		var circles = new Array(len);
		var xoffset = _width * 0.1;
		var xstep = _width * 0.8 / (len + 1);

		this.temp.frequency = new Array(len);
		for (var i = 0; i < len; i++) {
			this.circle_run(i, xoffset, xstep, circles);
		}
		this.graphic.circles = circles;

		var count = 0;
		addRenderFunc(this.name + "-1", function() {
			if (count ++ <= 3.5 * 60) {
				return;
			}
			
			// 调用: 跟系统说改场景播放完了
			endScene();
		});
	},

	circle_run : function (i, xoffset, xstep, circles) {
		var freq = Math.round(Math.random() * 100);
		if (freq > this.temp.threshold) {
			freq = Math.round(Math.random() * 100);
		}
		
		var temp = this.temp;
		temp.frequency[i] = freq;
		
		var x = xoffset + (i + 1) * xstep;
		var circle = new echarts.graphic.Circle({
			position: [x, -15],
			scale: [1, 1],
			shape: {
				cx: 0,
				cy: 0,
				r: 15
			},
			style: {
				fill: '#D5339D'
			},
			zlevel: 0
		});
		circles[i] = circle;
		zr.add(circle);

		circle.animate('', false)
			.delay(Math.round(Math.random() * 2000))
			.when(1500, {
				position: [x, _height * 0.75]
			})
			.start('bounceOut') // bounceOut ? elasticOut
			.done(function() {
				temp.displaydata[i][1] = freq;

				var opt = myChart.getOption();
				opt.series[0].data = temp.displaydata;

				myChart.setOption(opt);
			});
	},

	stage2 : function() {
		var opt = myChart.getOption();
		// 添加 y = 60 的线
		opt.series[0].markLine = {
			silent: true,
			data: [{
				yAxis: this.temp.threshold
			}],
			lineStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0, color: 'red' // 0% 处的颜色
					}, {
						offset: 1, color: 'blue' // 100% 处的颜色
					}],
					globalCoord: false // 缺省为 false
				}
			},
			label: {
				formatter: '阈值'
			},
			animationDuration: this.temp.len * 50
		};

		var len = this.temp.len;
		var temp = this.temp;
		
		temp.showAlerts = new Array(len);
		for (var i = 0; i < len; i++) {
			temp.showAlerts[i] = false;
		}

		opt.series[0].itemStyle.color = function(param) {
			if (temp.showAlerts[param.dataIndex]) {
				return  '#D5339D'// 警告色
			} else {
				return '#84AFD2'
			}
		}

		myChart.setOption(opt);

		addRenderFunc(this.name + "-2", function() {
			var frame = this.temp.pframe;
			if (this.temp.frequency[frame] > this.temp.threshold) {
				// 对应的方块要变红色
				this.temp.showAlerts[frame] = true;
				myChart.setOption(myChart.getOption());
			}
			this.temp.pframe ++;
		});

		addRenderFunc(this.name + "-3", function() {
			var len = this.graphic.circles.length;

			zr.configLayer(0, {
				motionBlur: false,
			});

			for (var i = 0; i < len; i++) {  
				var circle = this.graphic.circles[i];
				zr.remove(circle); // 需要移除所有小球
			}

			myChart.clear();
			endScene();
		}, {
			once : true,
			delay : this.config.duration
		});
	},

});
